<template>
  <div class="grid-content">

    <el-tree
      :data="data"
      :props="{label:'name',children:'children'}"
      :default-expand-all="false"
      :expand-on-click-node="false"
      highlight-current
      check-strictly
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
import { getOrganization } from '@/api/dataManagement'
import { arrToTree } from '@/utils/index'
export default {
  name: 'InfoTree',
  data() {
    return {
      data: []
    }
  },
  created() {
    this.loadOrganization()
  },
  methods: {
    async   loadOrganization() {
      const res = await getOrganization()
      // console.log(JSON.parse(res.data))
      this.data = arrToTree(JSON.parse(res.data))
    },
    handleNodeClick() {
      this.$emit('clickTree', this.data)
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-content {

  height: 900px;
  position: relative;
  cursor: default;
  background: #fff;
  color: #606266;
  padding-left: 10px;
  .el-tree {
    // margin-right: 20px;
    padding: 40px 20px 20px 10px;
    height: 100%;

  }
}
</style>

